<template>
    <div id="kernel">
        <header class="header">
            <a class="mui-icon mui-icon-arrowleft back" @click="Back()"></a>
            <h1 class="title">歌单</h1>
        </header>
        <section class="bg" :style="{'backgroundImage': `url('${hash.img}')`}"></section>
        <section v-if="hash" class="kernel" id="ker">
            <div>{{hash.audio_name}}</div>
            <div>{{hash.author_name}}</div>
            <img class="mui-media-object mui-pull-left Mimg" :src="hash.img" style="width: 150px;height: 150px;border-radius: 150px;">
            <div style="margin-top: 135px;color: #33ffff;padding: 0 30px;">{{lyc}}</div>
        </section>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            lycmsg: '',//歌词
            time: '',//时间
        }
    },
    computed: mapGetters([
        'hash',
        'lyc',
    ]),
    beforeRouteLeave(to, from, next) {
        from.path == '/kernel' ? this.$store.dispatch('showheader') : false;
        next();
    },
    methods: {
        Back() {
            this.$router.go(-1);
        }
    },
    mounted() {
        // mui.init({
        //     gestureConfig: {
        //         tap: true, //默认为true
        //         doubletap: true, //默认为false
        //         longtap: true, //默认为false
        //         swipe: true, //默认为true
        //         drag: true, //默认为true
        //         hold: false,//默认为false，不监听
        //         release: false//默认为false，不监听
        //     }
        // });
        // document.addEventListener("swipeleft", function() {
        //     mui.toast('你正在向左滑动', { duration: 'long', type: 'div' })
        //     this.$router.go(-1);
        // });
    }
}
</script>
<style scoped>
.header {
    display: flex;
    align-items: center;
    height: 38px;
    box-shadow: 0 1px 3px #a7a7a7;
}

.header .title {
    color: #bfcdd7;
    font-size: 13px;
    line-height: 3;
    flex: 1;
    margin-right: 48px;
    text-align: center;
}

.header .back {
    cursor: pointer;
    color: #bfcdd7;
    font-size: 20px;
    margin-left: 10px;
    margin-right: 10px;
    width: 24px;
}

section.bg {
    /* background-image: url(http://singerimg.kugou.com/uploadpic/softhead/400/20170928/20170928233712987.jpg); */
    position: absolute;
    top: 41px;
    right: 0;
    left: 0;
    bottom: 0;
    background-size: cover;
    -webkit-filter: blur(100px);
    -moz-filter: blur(100px);
    -ms-filter: blur(100px);
    filter: blur(100px);
}

section.kernel {
    text-align: center;
    padding-bottom: 52px;
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
}

section>div:nth-child(2) {
    color: #ccc;
}

section>div:nth-child(2) {
    margin: 35px;
}

@keyframes zhuang {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

.Mimg {
    animation: zhuang 36s linear infinite;
}
</style>

